<!-- 电影封面 -->
<template>
    <div class="wrap">
        <div class="container" @click="playVideo">
            <image mode="aspectFill" :class="'img-'+info.vid" :src="(imgShow||show)?info.coverImg:''" lazy-load></image>
            <div class="views-wrap">
                <i class="view-count">{{Number(info.views)}}</i>
                <span class="views">
                    <i class="myfont icon-bofang">
                    </i></span>
            </div>
            <div class="vip" v-if="Boolean(info.isVip)">
                <i class="myfont icon-vip1"></i>
            </div>
            <div class="new" v-if="Boolean(info.isNew)">
                <i class="">يېڭى</i>
            </div>
            <div class="title">
                <span>
                    {{info.title}}
                </span>
            </div>
        </div>

    </div>
</template>

<script>
let app = getApp();

export default {
    data() {
        return {
            showSrc: false,
            rect: {},
            sys: {},
            imgShow: false
        };
    },
    props: {
        info: {
            type: Object,
            default: {}
        },
        show: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        playVideo() {
            let uid = this.$store.state.userInfo.uid;
            let seenVideos = wx.getStorageSync("seenVideos");
            if (!seenVideos.some(item => item.vid == this.info.vid)) {
                let info = this.info;
                info.seeTime = Date.now();
                seenVideos.push(info);
                wx.setStorageSync("seenVideos", seenVideos);
            }
            this.$http.get("/mpAnalysis", { vid: this.info.vid, uid });
            wx.navigateTo({
                url: `/pages/Player/Player?vid=${this.info.vid}&type=${this.info.type}&sort=${this.info.sort}`
            });
        }
    },
    mounted() {
        this.sys = this.$store.state.systemInfo;
        let self = this;
        if (this.info.vid) {
        let observer = wx.createIntersectionObserver(this.$mp.page,{thresholds:[0,0.8]});
        setTimeout(()=>{
            observer.relativeToViewport().observe('.img-' + this.info.vid , res=> {
               if(res.intersectionRatio>0.8){
                   this.imgShow = true;
                   observer.disconnect();
               }
            })
            },100)
        }
    },
    components: {}
};
</script>
<style lang='scss' scoped>
.wrap {
    text-align: center;
    width: 100%;
    display: inline-block;
    .container {
        height: 368rpx;
        min-height: 368rpx;
        position: relative;
        margin-top: 12rpx;
        border-radius: 25rpx;
        overflow: hidden;
        box-shadow: 0 0 15rpx 2rpx rgba(0, 0, 0, 0.15);
        // width: 115px;
        image {
            border-radius: 15rpx;
            height: 313rpx;
            min-height: 313rpx;
            max-height: 313rpx;
            width: 100%;
        }
        .vip {
            position: absolute;
            top: 0;
            width: 80rpx;
            line-height: 56rpx;
            color: #ebedf0;
            height: 56rpx;
            background-color: #fe0036;
            font-family: "Franklin Gothic Medium", "Arial Narrow", Arial,
                sans-serif;
            border-radius: 27rpx 0 20rpx 0;
            // left: 13rpx;
            i {
                font-size: 20px;
            }
        }
        .new {
            position: absolute;
            top: 0;
            right: 0;
            width: 40px;
            line-height: 28px;
            color: #ebedf0;
            height: 28px;
            background-color: #3dabe8;
            // background-color: #fe0036;
            border-radius: 0px 10px 0 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            i {
                font-size: 32rpx;
                transform: scaleY(0.8);
            }
        }
        .views-wrap {
            position: absolute;
            bottom: 56rpx;
            right: 0;
            color: #ffffff;
            font-size: 24rpx;
            background-color: #000;
            opacity: 0.7;
            height: 46rpx;
            line-height: 60rpx;
            text-align: right;
            display: flex;
            align-items: center;
            justify-content: space-around;
            border-radius: 20rpx;
            text-align: right;
            .views {
                i {
                    color: white;
                    font-size: 12px;
                    transform: scale(0.5);
                    display: inline-block;
                    padding: 2px 8px;
                    border: 1px solid white;
                    border-radius: 50%;
                    line-height: 23px;
                }
                // margin-right: 7px;
            }
            .view-count {
                font-family: "Hiragino Sans GB", "Microsoft Yahei", SimSun,
                    Arial, "Helvetica Neue", Helvetica;
                display: inline-block;
                margin-left: 10px;
                margin-top: -3px;
            }
        }
        .title {
            font-family: "ALKATIP UI";
            direction: rtl;
            color: #123;
            font-size: 13px;
            // max-width: 110px;
            width: 100%;
            text-align: center;
            span {
                text-overflow: clip;
                overflow: hidden;
                white-space: nowrap;
            }
        }
    }
}
</style>